<template>
  <div class="cart">
    <Title title="商品订单"></Title>
    <div class="left">
      <el-card
        class="box-card"
        shadow="hover"
        v-for="(l, i) in billList"
        :key="i"
      >
        <template #header>
          <div class="card-header">
            {{ l.good.name }}
          </div>
        </template>

        <div class="content">
          <div class="handle">
            <p>数量：{{ l.value }}</p>
            <p>类型 ： {{ l.good.type.text }}</p>
            <p>原价 ： ￥{{ l.good.price }}</p>
            <p>折扣 ： {{ l.good.discount }} 折</p>
            <p>
              折扣价 ：￥{{
                ((l.good.price * l.good.discount) / 10).toFixed(1)
              }}
            </p>
            <p>
              总价 ：￥{{
                ((l.good.price * l.good.discount * l.value) / 10).toFixed(1)
              }}
            </p>
            <el-button type="danger" @click="billdelete(l, i)"
              >删除订单</el-button
            >
            <el-button type="success" @click="pay(l)">付款</el-button>
          </div>
          <div class="pic">
            <img :src="l.good.img" alt="" />
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Ajax } from "@/api";
import { ElMessage } from "element-plus";
const billList = ref([]);
const getBill = async () => {
  let res = await Ajax.billlist();
  billList.value = res.result.filter(item=>item.status!=="paid")
};
const billdelete = async (l, i) => {
  let res:any = await Ajax.billdelete({ _id: l._id });
  billList.value.splice(i, 1);
};
const pay = async (l, i) => {
  let res = await Ajax.billupdate({ _id: l._id, status: "paid" });
  billList.value.splice(i, 1);
  ElMessage.success("付款成功")
};

onMounted(() => {
  getBill();
});
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  .handle {
    margin-right: 100px;
    p {
      margin-bottom: 10px;
    }
  }
  .pic{
    img{
        width: 200px;
    }
  }
}
</style>
